import React, { useState } from 'react'
import ProTable from '@ant-design/pro-table';
import { Button, Tag, Modal, Form, Input, InputNumber } from 'antd'
import request from '@/utils/request'
import styles from '../index.less'


export default () => {
    const [visable, setVisable] = useState(false)
    const [saveForm] = Form.useForm()
    const columns: any = [
        {
            title: '分类名称',
            dataIndex: 'store_title',
        },
        {
            title: '排序',
            render: (text: any) => <Tag color="cyan">{text} </Tag>,
            align: "center",
            dataIndex: 'level_title',
            hideInSearch: true
        },

        {
            title: '操作',
            align: "center",
            render: (text: any, record: any) => (
                <>
                    <Button size="small" type="primary" ghost style={{ marginRight: "6px" }}>编辑</Button>
                    <Button size="small" danger>删除</Button>
                </>
            ),
        },
    ];

    return (
        <>
            <ProTable<any>
                options={false}
                toolBarRender={(action, { selectedRows }) => [
                    <Button type="primary" onClick={() => {
                        setVisable(true)
                    }}>
                        添加分类
                </Button>
                ]}
                headerTitle={null}
                rowKey="id"
                columns={columns}
                request={(params: any) => request('/store/apply-list', {
                    params,
                })}
                tableAlertRender={false}
                className={styles.antProTable}
            />

            <Modal
                title="分类"
                visible={visable}
                onOk={() => {
                    saveForm.submit()
                    setVisable(false)
                }}
                onCancel={() => setVisable(false)}
                getContainer={false}
            >
                <Form
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 15 }}
                    form={saveForm}
                >
                    <Form.Item label="类型名称" name="title" required>
                        <Input />
                    </Form.Item>
                    <Form.Item label="排序" name="sort" help="排序值请为整数">
                        <InputNumber />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}